/**
 * @description  行业敞口明细
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { TableC, FirstHeaderC } from '@/src/comps';
import styles from './styles.less';

class IndustryExposureDetail extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: {
        columns: [],
      },
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { equityIndustryRiskM } = this.props;

    if (JSON.stringify(nextProps.equityIndustryRiskM.searchData) !== JSON.stringify(equityIndustryRiskM.searchData) || nextProps.industryType !== this.props.industryType) {
      if (nextProps.equityIndustryRiskM.searchData) {
        this.getData({ ...nextProps.equityIndustryRiskM.searchData, industryType: nextProps.industryType });
      }
    }
  }

  //获取数据
  getData = (payload) => {
    this.props.dispatch({
      type: 'equityIndustryRiskM/getIndustryExposureDetail',
      payload: {
        ...payload,
      },
      callback: (data) => {
        this.setState({
          data: data.data,
        });
      },
    });
  };

  render() {
    const { data } = this.state;
    const { columns = [], dataSource } = data;

    dataSource;
    const newColumns = columns.map((x) => {
      if (['marketValue'].indexOf(x.key) > -1) {
        return {
          ...x,
          type: 'money',
          width: '10%',
        };
      }

      if (['avgActiveExposure', 'ir', 'tstat'].indexOf(x.key) > -1) {
        return {
          ...x,
          align: 'right',
          // type: 'number',
          width: '10%',
        };
      }

      if (['marketValPercentage', 'avgReturn', 'varReturn', 'totalReturn', 'totalRisk'].indexOf(x.key) > -1) {
        return {
          ...x,
          type: 'rate',
          width: '10%',
        };
      }

      return x;
    });
    const style = {
      width: '10%',
      textAlign: 'right',
    };
    const arr = dataSource?.concat();
    const item = arr?.pop();
    return (
      <div style={{ marginTop: '20px' }}>
        <FirstHeaderC title='行业敞口明细' />
        <TableC columns={newColumns} dataSource={arr} scroll={{ y: 300 }} loading={this.props.loading} hidePage={true} rowKey='industryName'></TableC>
        {arr?.length > 0 && (
          <div className='ant-table' style={{ width: 'calc(100% - 8px)' }}>
            <div className='ant-table-tbody'>
              <tr className={styles.rowbg} style={{ display: 'flex' }}>
                <td style={{ flex: 1 }}>{item.industryName}</td>
                <td style={style}>{item.totalReturn.toFixed(2)}%</td>
                <td style={style}>{item.totalRisk.toFixed(2)}%</td>
                <td style={style}>{item.ir}</td>
                <td style={style}>{item.tstat}</td>
              </tr>
            </div>
          </div>
        )}
      </div>
    );
  }
}
export default connect(({ equityIndustryRiskM, loading }) => ({
  equityIndustryRiskM,
  loading: loading.effects['equityIndustryRiskM/getIndustryExposureDetail'],
}))(IndustryExposureDetail);
